:root {
	--blue: rgb( 155, 226, 255 );
}

* {
	padding: 0;
	margin: 0;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	background-color: var( --blue );
}

img {
	transform: translateY( -50vh );
	opacity: 0;
	transition: all 1s ease-in-out 0s;
}

.active {
	transform: translateY( 0 );
	opacity: 1;
	transition: all 1s ease-in-out 0s;
}

.control, .show {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	transition: all 1s ease-in-out 0s;
}

.control {
	width: 0;
	opacity: 0;
}

button {
	display: block;
	background-color: #FFF;
	color: var( --blue );
	border: 0;
	border-radius: 5px;
	transition: all .1s linear 0s;
}

button:first-of-type {
	cursor: pointer;
}

button:last-of-type {
	cursor: no-drop;
}

button:hover {
	background-color: var( --blue );
	color: #FFF;
}

.text, .down {
	position: absolute;
	color: #FFF;
	transition: all 1s ease-in-out 0s;
}

.text {
	top: 0;
	opacity: 0;
}

.down {
	top: 70%;
	opacity: 1;
}

@media screen and (min-width: 800px) {
	img, .active {
		width: calc( ( 100vw + 100vh ) / 2 / 5 );
	}

	.show {
		width: 70vw;
		opacity: 1;
	}

	button {
		width: 15vw;
		height: 7.5vh;
		font: normal calc( ( 100vw + 100vh ) / 2 / 40 ) "Microsoft Arial";
	}

	.text, .down {
		font: normal calc( ( 100vw + 100vh ) / 2 / 30 ) "Microsoft Arial";
	}
}

@media screen and (max-width: 800px) and (min-width: 600px) {
	img, .active {
		width: calc( ( 100vw + 100vh ) / 2 / 3 );
	}

	.show {
		width: 90vw;
		opacity: 1;
	}

	button {
		width: 20vw;
		height: 7.5vh;
		font: normal calc( ( 100vw + 100vh ) / 2 / 40 ) "Microsoft Arial";
	}

	.text, .down {
		font: normal calc( ( 100vw + 100vh ) / 2 / 20 ) "Microsoft Arial";
	}
}

@media screen and (max-width: 600px) {
	img, .active {
		width: calc( ( 100vw + 100vh ) / 2 / 3 );
	}

	.show {
		width: 90vw;
		opacity: 1;
	}

	button {
		width: 20vw;
		height: 7.5vh;
		font: normal calc( ( 100vw + 100vh ) / 2 / 40 ) "Microsoft Arial";
	}

	.text, .down {
		font: normal calc( ( 100vw + 100vh ) / 2 / 20 ) "Microsoft Arial";
	}
}